import React from "react";
import { Input, Select, Form, Button, Checkbox, Radio ,DatePicker } from "antd";
import Utils from "@/utils/utils"
const FormItem = Form.Item;
const Option = Select.Option;

class FilterForm extends React.Component {
  handleFilterSubmit=()=>{
      let fieldsValue = this.props.form.getFieldsValue();
      this.props.filterSubmit(fieldsValue);//order中index页面定义的方法
  }

  reset = ()=>{
    this.props.form.resetFields();
  }
  
  initFormList = () => {
    const { getFieldDecorator } = this.props.form;
    const formList = this.props.formList;
    const formItemList = [];
    if (formList && formList.length > 0) {
      formList.forEach((item, i) => {
        let label = item.label;
        let field = item.field;
        let initialValue = item.initialValue || "";
        let placeholder = item.placeholder;
        let width = item.width;
        if (item.type == "时间查询"){
          const begin_time = (
            <FormItem label="订单时间" key={field}>
              { //[变量]
              getFieldDecorator('begin_time')(
                <DatePicker showTime = {true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"></DatePicker>
              )}
            </FormItem>
          );
          formItemList.push(begin_time)
          const end_time = (
            <FormItem label="~" colon={false} key={field}>
              { //[变量]
              getFieldDecorator('end_time')(
                <DatePicker showTime = {true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"></DatePicker>
              )}
            </FormItem>
          );
          formItemList.push(end_time)
        }else if (item.type == "DATE"){
          const Date = (
            <FormItem label="入职时间" key={field}>
              { //[变量]
              getFieldDecorator([field])(
                <DatePicker showTime = {true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"></DatePicker>
              )}
            </FormItem>
          );
          formItemList.push(Date)
        }
        else if (item.type == "INPUT") {
          const INPUT = (
            <FormItem label={label} key={field}>
              { //[变量]
              getFieldDecorator([field], { initialValue: initialValue })(
                <Input type="text" placeholder={placeholder}></Input>
              )}
            </FormItem>
          );
          formItemList.push(INPUT)
        }
        
        else if (item.type == "CHECKBOX") {
            const CHECKBOX = (
              <FormItem label={label} key={field}>
                { //[变量]
                getFieldDecorator([field], { 
                    valuePropName:"checked" ,
                    initialValue: initialValue //ture false
                })(
                  <Checkbox>
                      {label}
                  </Checkbox>
                )}
              </FormItem>
            );
            formItemList.push(CHECKBOX)
          }
          
          else if (item.type == "SELECT") {
            const SELECT = (
              <FormItem label={label} key={field}>
                { //[变量]
                getFieldDecorator([field], { initialValue: initialValue })(
                  <Select style={{ width: width }} placeholder={placeholder}>
                      {Utils.getOptionList(item.list)}
                  </Select>
                )}
              </FormItem>
            );
            formItemList.push(SELECT)
          }
      });
    }
    return formItemList
  };

  render() {
    return (
      <div>
        <Form layout="inline">
            {this.initFormList()}
            <FormItem>
                <Button type="primary" style={{ margin: "0 20px" }} onClick={this.handleFilterSubmit}>
                    查询
                </Button>
                <Button onClick={this.reset}>重置</Button>
            </FormItem>
        </Form>
      </div>
    );
  }
}

export default Form.create({})(FilterForm);
